<!-- 全局行为验证码 -->
<template>
    <div v-if="state.isShow">
        <lay-layer 
            v-model="state.isShow2" title="请拖动滑块到合适的位置" :shade="true" :shadeClose="false" :shadeOpacity="0.7" :area="['auto', 'auto']" :end="end">
            <div class="verify-box-f-div">
                <div class="verify-box" :class=" state.isShowVerify ? 'verify-box-show' : '' ">
                    <!-- :imgSize="{ width: '400px', height: '200px' }"-->
                    <VerifyView
                        v-if="state.isShowVerify2"
                        mode="mask"
                        :captcha-type="state.captchaType"
                        ref="verify"
                        @success="checkSuccess"
                    ></VerifyView>
                </div>
            </div>
        </lay-layer>
    </div>
</template>

<script setup name="os-captcha-model">
import {onMounted, reactive} from "vue";
import {useAppStore} from "../../store/app";
import mitt from "@/mitt";
const appStore = useAppStore();
import VerifyView from "./VerifyView";
const { proxy } = getCurrentInstance();

const state = reactive({
    isShow: false,
    isShow2: false,
    isShowVerify: false,
    isShowVerify2: false,
    captchaType: 'blockPuzzle',  // 验证码类型：blockPuzzle=滑块、clickWord=点击文字
    success: null,  // 验证成功回调
})

// 显示验证码
const show = ( success ) => {
    state.isShow = true;
    nextTick(() => {
        state.isShow2 = true;
        nextTick(() => {
            state.isShowVerify = true;
            state.isShowVerify2 = true;
        })
    })
}
// 订阅事件：imageList 
mitt.off('showCaptchaModel');
mitt.on('showCaptchaModel', ({ success }) => {
    state.success = success;
    show();
});

// 验证成功
const checkSuccess = (res) => {
    // console.log(res);
    // 关闭时要先切换父div的class，再销毁子组件，这样才能有完整动画
    state.isShowVerify = false;
    setTimeout(() => {
        state.isShowVerify2 = false;
        state.isShow2 = false;
        setTimeout( () => {
            state.isShow = false;
        }, 200)
        // 回调 
        if(state.success) {
            state.success(res);
        }
    }, 1000)
}

const end = () => {
    state.isShow2 = false;
    state.isShowVerify = false;
    state.isShowVerify2 = false;
    setTimeout(()=>{
        state.isShow = false;
    }, 200)
}

onMounted(()=>{
    // show();
    
})

</script>

<style scoped lang="scss">
.verify-box-f-div{
    padding: 10px;
}
.verify-box{
    // 340px  230px 
    min-width: 250px;
    min-height: 115px;
    max-width: 250px;
    max-height: 115px;
    overflow: hidden;
    padding: 1px;
    // 关闭时的动画时效
    transition: all 1.1s;
}
.verify-box-show{
    max-width: 360px;
    max-height: 270px;
    // 开启时的动画时效
    transition: all 1.5s;
}

</style>
